<template>
  <div class="map-wrap" id="echartsMap3dContainerId"> </div>
</template>
<script lang="ts">
  import {
    defineComponent,
    toRefs,
    reactive,
    ref,
    onBeforeMount,
    onMounted,
    onUnmounted,
    onBeforeUnmount,
    watch,
    nextTick,
  } from 'vue';
  import * as echarts from 'echarts';
  //需要引入echarts-gl扩展，否则map3D类型无法识别
  import 'echarts-gl';
  import _ from 'lodash';
  //引入axios用于读取本地geo的json文件
  import axios from 'axios';
  import { chinaBoundaryData, chinaData } from './chinaBoundary';
  import { geoCoordinatesData } from './chinaMap';

  export default defineComponent({
    name: 'EchartsChina3dMapTest',
    components: {},
    props: {},
    setup(props, context) {
      //map容器定义
      let myChart = null;
      let mapList = [];
      //指定points中的气泡样式
      let points = [
        { station: '北京市', num: 10 },
        { station: '上海市', num: 5 },
        { station: '西安市', num: 6 },
        { station: '重庆市', num: 5 },
        { station: '延庆区', num: 2 },
        { station: '阿勒泰地区', num: 8 },
      ];

      let points2 = [
        { station: '昆明市', num: 10 },
        { station: '成都市', num: 5 },
        { station: '哈密市', num: 6 },
        { station: '丽江市', num: 5 },
        { station: '北京市', num: 2 },
        { station: '吉林市', num: 8 },
      ];

      const convertData = (data: any, geoCoorMap: any) => {
        const res = [];
        data.forEach((item) => {
          geoCoorMap.forEach((ele) => {
            if (ele.name.includes(item.station)) {
              res.push({
                name: item.station,
                value: ele.center.concat(item.num),
              });
            }
          });
        });
        return res;
      };
      /*
  chinaBoundary：绘制地图边界线，制作2d倾斜效果
  注册地图时，使用china名称会产生南海诸岛，改用其他名字即可不展示南海诸岛
  echarts.registerMap("chinaMap", chinaData);
  */

      let option = {
        title: {
          // 标题
          top: '20px',
          text: name,
          subtext: '基于echarts-gl',
          x: 'center',
          textStyle: {
            color: '#fff',
          },
        },
        tooltip: {
          trigger: 'item',
          formatter: function (params) {
            console.log('tooltip trigger item params', params);
            // 根据需要进行数据处理或格式化操作
            if (params.seriesType == 'bar3D') {
              return [
                params.seriesName,
                params.name + '：' + params.value[2] + (params.value[3] || ''),
              ].join('<br />');
            } else if (params && params.data) {
              const { adcode, name, level } = params.data;
              // 返回自定义的tooltip内容
              return `adcode: ${adcode}<br>name: ${name}<br>level: ${level}`;
            }
          },
          backgroundColor: 'rgba(50, 50, 50, 0.8)',
          textStyle: {
            color: '#FFFFFF',
            textalign: 'center',
            fontSize: 12,
          },
        },
        geo3D: {
          show: true,
          map: 'chinaBoundary',
          viewControl: {
            beta: 0, //x轴旋转
            alpha: 45, //Y轴旋转
            panMouseButton: 'right', //平移操作使用的鼠标按键
            rotateMouseButton: 'left', //旋转操作使用的鼠标按键
          },
          light: {
            main: {
              color: '#ffffff',
              intensity: 1,
              shadow: false,
            },
          },
          itemStyle: {
            color: '#4D96FA',
            borderWidth: 1,
            borderColor: '#fff',
            opcity: 1,
          },

          shading: 'realistic',
          label: {
            show: true,
            color: '#fff',
            distance: 5,
          },
          emphasis: {
            label: { show: true },
            itemStyle: { color: '#36A8FF' },
          },
          groundPlane: false,
          //地图区域的设置
          data: geoCoordinatesData,
          // 将geo3d放在最底层
          zlevel: -1,
        },
        //series中，第0个用于，第1个用于points中给定的点集合的气泡效果，第2个用于绘制飞行图（每个线条指定不同颜色）
        series: [
          {
            type: 'map3D',
            roam: true,
            // aspectScale: 1, //长宽比
            animation: false,
            center: [105, 30],
            zoom: 1,
            map: 'chinaMap', //使用
            scaleLimit: {
              min: 1,
              max: 5,
            },
            zlevel: -10, //设置显示底层
            regionHeight: 3, //三维地图每个区域的高度，设置后对每个区域均有效，可以通过data中的相同属性进行分区域控制
            label: {
              // 标签的相关设置
              show: name !== '中国', // (地图上的城市名称)是否显示标签 [ default: false ]
              formatter: function (params) {
                return params.name ? params.name : ' ';
              },
              position: 'right',
              textStyle: {
                // 标签的字体样式
                color: '#fff', // 地图初始化区域字体颜色
                fontSize: 12, // 字体大小
              },
            },
            //地图的颜色
            itemStyle: {
              // color: '#2AB8FF', // 地图板块的颜色，蓝绿色
              color: '#013954', // 地图板块的颜色，浅蓝色
              // color: 'rgb(147, 235, 248)',
              //地图区域的颜色
              // areaColor: 'transparent', //地图区域的颜色//可以设置为透明
              // areaColor: {
              //   x: 0,
              //   y: 0,
              //   x2: 0,
              //   y2: 1,
              //   colorStops: [
              //     { offset: 0, color: 'rgba(9, 89, 169, 0.5)' },
              //     { offset: 1, color: 'rgba(3, 25, 48, 0.5)' },
              //   ],
              // },
              opacity: 0.8, // 图形的不透明度 [ default: 1 ]
              // borderWidth: 2, // (地图板块间的分隔线)图形描边的宽度。加上描边后可以更清晰的区分每个区域   [ default: 0 ]
              // borderColor: '#286ECA', // 图形描边的颜色。[ default: #333 ]
              //图形的描边颜色
              borderColor: 'rgb(147, 235, 248)', //使用白色做亮边效果处理
              // borderColor: new echarts.graphic.LinearGradient(
              //   0,
              //   0,
              //   0,
              //   1,
              //   [
              //     { offset: 0, color: '#0a94c2' },
              //     { offset: 1, color: '#0982a9' },
              //   ],
              //   false,
              // ),
              borderWidth: 2,
              //阴影颜色，实测设置后无效，最终显示颜色均为地图板块的颜色
              // shadowColor: '#0f6b8a',
              // shadowColor: '#ff0000',
              // shadowColor: 'rgba(147, 235, 248,0.5)',
              // shadowColor: 'rgba(9, 89, 169, 0.8)',
              //阴影水平、垂直方向上的偏移距离；设置后会有立体效果
              shadowOffsetX: 10,
              shadowOffsetY: 10,
              //图形阴影的模糊大小
              shadowBlur: 10,
            },
            emphasis: {
              // 鼠标 hover 高亮时图形和标签的样式 (当鼠标放上去时  label和itemStyle 的样式)
              label: {
                // label 高亮时的配置
                show: true,
                textStyle: {
                  color: '#fff', // 高亮时标签颜色变为 白色
                  fontSize: 18, // 高亮时标签字体 变大
                },
              },
              itemStyle: {
                // itemStyle 高亮时的配置
                areaColor: '#66ffff', // 高亮时地图板块颜色改变
              },
            },
            groundPlane: {
              // 地面可以让整个组件有个“摆放”的地方，从而使整个场景看起来更真实，更有模型感。
              show: false, // 是否显示地面。[ default: false ]
              color: '#aaa', // 地面颜色。[ default: '#aaa' ]
            },
            // shading: 'lambert', //三维地图中三维图形的着色效果，取值为：color、lambert、realistic
            light: {
              // 光照相关的设置。在 shading 为 'color' 的时候无效。  光照的设置会影响到组件以及组件所在坐标系上的所有图表。合理的光照设置能够让整个场景的明暗变得更丰富，更有层次。
              main: {
                // 场景主光源的设置，在 globe 组件中就是太阳光。
                color: '#3D94CE', // 主光源的颜色。[ default: #fff ]
                intensity: 1.2, // 主光源的强度。[ default: 1 ]
                shadow: false, // 主光源是否投射阴影。默认关闭。    开启阴影可以给场景带来更真实和有层次的光照效果。但是同时也会增加程序的运行开销。
                // shadowQuality: 'high',      // 阴影的质量。可选'low', 'medium', 'high', 'ultra' [ default: 'medium' ]
                alpha: 55, // 主光源绕 x 轴，即上下旋转的角度。配合 beta 控制光源的方向。[ default: 40 ]
                beta: 10, // 主光源绕 y 轴，即左右旋转的角度。[ default: 40 ]
              },
              ambient: {
                // 全局的环境光设置。
                // color: 'red', // 环境光的颜色。[ default: #fff ]
                intensity: 0.5, // 环境光的强度。[ default: 0.2 ]
              },
            },
            viewControl: {
              // 用于鼠标的旋转，缩放等视角控制。
              projection: 'perspective', // 投影方式，默认为透视投影'perspective'，也支持设置为正交投影'orthographic'。
              autoRotate: false, // 是否开启视角绕物体的自动旋转查看。[ default: false ]
              autoRotateDirection: 'cw', // 物体自传的方向。默认是 'cw' 也就是从上往下看是顺时针方向，也可以取 'ccw'，既从上往下看为逆时针方向。
              autoRotateSpeed: 10, // 物体自传的速度。单位为角度 / 秒，默认为10 ，也就是36秒转一圈。
              autoRotateAfterStill: 3, // 在鼠标静止操作后恢复自动旋转的时间间隔。在开启 autoRotate 后有效。[ default: 3 ]
              damping: 0, // 鼠标进行旋转，缩放等操作时的迟滞因子，在大于等于 1 的时候鼠标在停止操作后，视角仍会因为一定的惯性继续运动（旋转和缩放）。[ default: 0.8 ]
              rotateSensitivity: 1, // 旋转操作的灵敏度，值越大越灵敏。支持使用数组分别设置横向和纵向的旋转灵敏度。默认为1, 设置为0后无法旋转。	rotateSensitivity: [1, 0]——只能横向旋转； rotateSensitivity: [0, 1]——只能纵向旋转。
              zoomSensitivity: 1, // 缩放操作的灵敏度，值越大越灵敏。默认为1,设置为0后无法缩放。
              panSensitivity: 1, // 平移操作的灵敏度，值越大越灵敏。默认为1,设置为0后无法平移。支持使用数组分别设置横向和纵向的平移灵敏度
              panMouseButton: 'left', // 平移操作使用的鼠标按键，支持：'left' 鼠标左键（默认）;'middle' 鼠标中键 ;'right' 鼠标右键(注意：如果设置为鼠标右键则会阻止默认的右键菜单。)
              rotateMouseButton: 'left', // 旋转操作使用的鼠标按键，支持：'left' 鼠标左键;'middle' 鼠标中键（默认）;'right' 鼠标右键(注意：如果设置为鼠标右键则会阻止默认的右键菜单。)
              distance: 100, // [ default: 100 ] 默认视角距离主体的距离，对于 grid3D 和 geo3D 等其它组件来说是距离中心原点的距离,对于 globe 来说是距离地球表面的距离。在 projection 为'perspective'的时候有效。
              minDistance: 40, // [ default: 40 ] 视角通过鼠标控制能拉近到主体的最小距离。在 projection 为'perspective'的时候有效。
              maxDistance: 400, // [ default: 400 ] 视角通过鼠标控制能拉远到主体的最大距离。在 projection 为'perspective'的时候有效。
              alpha: 40, // 视角绕 x 轴，即上下旋转的角度。配合 beta 可以控制视角的方向。[ default: 40 ]
              beta: 0, // 视角绕 y 轴，即左右旋转的角度。[ default: 0 ]
              minAlpha: -360, // 上下旋转的最小 alpha 值。即视角能旋转到达最上面的角度。[ default: 5 ]
              maxAlpha: 360, // 上下旋转的最大 alpha 值。即视角能旋转到达最下面的角度。[ default: 90 ]
              minBeta: -360, // 左右旋转的最小 beta 值。即视角能旋转到达最左的角度。[ default: -80 ]
              maxBeta: 360, // 左右旋转的最大 beta 值。即视角能旋转到达最右的角度。[ default: 80 ]
              center: [0, 0, 0], // 视角中心点，旋转也会围绕这个中心点旋转，默认为[0,0,0]。
              animation: true, // 是否开启动画。[ default: true ]
              animationDurationUpdate: 1000, // 过渡动画的时长。[ default: 1000 ]
              animationEasingUpdate: 'cubicInOut', // 过渡动画的缓动效果。[ default: cubicInOut ]
            },
          },
          //带有涟漪特效动画的散点（气泡）图
          {
            type: 'scatter3D',
            coordinateSystem: 'geo3D',
            geoIndex: 0,
            zlevel: 300,
            symbol: 'pin',
            symbolSize: [30, 50],
            data: convertData(points, geoCoordinatesData),
          },
          //3d柱状图
          {
            name: 'city',
            type: 'bar3D',
            coordinateSystem: 'geo3D',
            geoIndex: 0,
            shading: 'lambert',
            label: {
              show: true,
              position: 'top',
            },
            data: convertData(points2, geoCoordinatesData),
            barSize: 2,
            minHeight: 1,
            itemStyle: {
              color: '#FFB239', //柱子颜色为金黄色
            },
            emphasis: {
              label: { show: true },
            },
            zlevel: 50,
          },
        ],
      };

      // 获取原始地图json数据
      function getJSON(name, adcode) {
        const url = `https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=${adcode}_full`;
        axios
          .get(url)
          .then((res) => {
            renderChart(name, res.data);
          })
          .catch((ex) => {
            console.log('axios.get geo catch', ex);
          });
      }

      // 设置返回策略
      function setBackbtn({ name, adcode }) {
        mapList.push({ name, adcode });
        console.log(JSON.stringify(mapList));
        // myChart.dispatchAction({
        //   type: "select",
        //   name: "山东省",
        // });
      }
      // 点击返回，地图返回上一级
      function goBack() {
        if (mapList.length >= 2) {
          const { name, adcode } = mapList[mapList.length - 2];
          mapList.splice(-2, 2);
          getJSON(name, adcode);
        }
      }
      // 初始化中国地图
      function initChinaMap() {
        mapList = [];
        getJSON('中国', 100000);
      }
      // 渲染地图
      function renderChart(name, data) {
        console.log('renderChart data', data);
        myChart.clear();
        // 注册地图
        echarts.registerMap(name, data);
        // 根据 json 数据拼装 mapdata， 用于地图点击下钻时传递数据，主要有adcode、name
        const mapdata = data.features.map((item) => {
          return item.properties;
        });
        // 配置option
        setOption(name, mapdata);
      }
      // 设置地图option
      function setOption(name, data) {
        const option = {
          title: {
            // 标题
            top: '20px',
            text: name,
            subtext: '基于echarts-gl',
            x: 'center',
            textStyle: {
              color: '#fff',
            },
          },
          tooltip: {
            trigger: 'item',
            formatter: function (params) {
              // 根据需要进行数据处理或格式化操作
              if (params && params.data) {
                const { adcode, name, level } = params.data;
                // 返回自定义的tooltip内容
                return `adcode: ${adcode}<br>name: ${name}<br>level: ${level}`;
              }
            },
            backgroundColor: 'rgba(50, 50, 50, 0.8)',
            textStyle: {
              color: '#FFFFFF',
              textalign: 'center',
              fontSize: 12,
            },
          },
          series: [
            {
              type: 'map3D',
              name: 'map3D', // 系列名称
              aspectScale: 1, //长宽比
              animation: false,
              center: [105, 30],
              zoom: 1,
              scaleLimit: {
                min: 1,
                max: 5,
              },
              map: name, // 地图类型。
              zlevel: -10, //设置显示底层
              regionHeight: 3, //三维地图每个区域的高度，设置后对每个区域均有效，可以通过data中的相同属性进行分区域控制
              label: {
                // 标签的相关设置
                show: name !== '中国', // (地图上的城市名称)是否显示标签 [ default: false ]
                formatter: function (params) {
                  return params.name ? params.name : ' ';
                },
                position: 'right',
                textStyle: {
                  // 标签的字体样式
                  color: '#fff', // 地图初始化区域字体颜色
                  fontSize: 12, // 字体大小
                },
              },
              //地图的颜色
              itemStyle: {
                // color: '#2AB8FF', // 地图板块的颜色，蓝绿色
                color: '#013954', // 地图板块的颜色，浅蓝色
                // color: 'rgb(147, 235, 248)',
                //地图区域的颜色
                // areaColor: 'transparent', //地图区域的颜色//可以设置为透明
                // areaColor: {
                //   x: 0,
                //   y: 0,
                //   x2: 0,
                //   y2: 1,
                //   colorStops: [
                //     { offset: 0, color: 'rgba(9, 89, 169, 0.5)' },
                //     { offset: 1, color: 'rgba(3, 25, 48, 0.5)' },
                //   ],
                // },
                opacity: 0.8, // 图形的不透明度 [ default: 1 ]
                // borderWidth: 2, // (地图板块间的分隔线)图形描边的宽度。加上描边后可以更清晰的区分每个区域   [ default: 0 ]
                // borderColor: '#286ECA', // 图形描边的颜色。[ default: #333 ]
                //图形的描边颜色
                borderColor: 'rgb(147, 235, 248)', //使用白色做亮边效果处理
                // borderColor: new echarts.graphic.LinearGradient(
                //   0,
                //   0,
                //   0,
                //   1,
                //   [
                //     { offset: 0, color: '#0a94c2' },
                //     { offset: 1, color: '#0982a9' },
                //   ],
                //   false,
                // ),
                borderWidth: 2,
                //阴影颜色，实测设置后无效，最终显示颜色均为地图板块的颜色
                // shadowColor: '#0f6b8a',
                // shadowColor: '#ff0000',
                // shadowColor: 'rgba(147, 235, 248,0.5)',
                // shadowColor: 'rgba(9, 89, 169, 0.8)',
                //阴影水平、垂直方向上的偏移距离；设置后会有立体效果
                shadowOffsetX: 10,
                shadowOffsetY: 10,
                //图形阴影的模糊大小
                shadowBlur: 10,
              },
              emphasis: {
                // 鼠标 hover 高亮时图形和标签的样式 (当鼠标放上去时  label和itemStyle 的样式)
                label: {
                  // label 高亮时的配置
                  show: true,
                  textStyle: {
                    color: '#fff', // 高亮时标签颜色变为 白色
                    fontSize: 18, // 高亮时标签字体 变大
                  },
                },
                itemStyle: {
                  // itemStyle 高亮时的配置
                  areaColor: '#66ffff', // 高亮时地图板块颜色改变
                },
              },
              groundPlane: {
                // 地面可以让整个组件有个“摆放”的地方，从而使整个场景看起来更真实，更有模型感。
                show: false, // 是否显示地面。[ default: false ]
                color: '#aaa', // 地面颜色。[ default: '#aaa' ]
              },
              // shading: 'lambert', //三维地图中三维图形的着色效果，取值为：color、lambert、realistic
              light: {
                // 光照相关的设置。在 shading 为 'color' 的时候无效。  光照的设置会影响到组件以及组件所在坐标系上的所有图表。合理的光照设置能够让整个场景的明暗变得更丰富，更有层次。
                main: {
                  // 场景主光源的设置，在 globe 组件中就是太阳光。
                  color: '#3D94CE', // 主光源的颜色。[ default: #fff ]
                  intensity: 1.2, // 主光源的强度。[ default: 1 ]
                  shadow: false, // 主光源是否投射阴影。默认关闭。    开启阴影可以给场景带来更真实和有层次的光照效果。但是同时也会增加程序的运行开销。
                  // shadowQuality: 'high',      // 阴影的质量。可选'low', 'medium', 'high', 'ultra' [ default: 'medium' ]
                  alpha: 55, // 主光源绕 x 轴，即上下旋转的角度。配合 beta 控制光源的方向。[ default: 40 ]
                  beta: 10, // 主光源绕 y 轴，即左右旋转的角度。[ default: 40 ]
                },
                ambient: {
                  // 全局的环境光设置。
                  // color: 'red', // 环境光的颜色。[ default: #fff ]
                  intensity: 0.5, // 环境光的强度。[ default: 0.2 ]
                },
              },
              viewControl: {
                // 用于鼠标的旋转，缩放等视角控制。
                projection: 'perspective', // 投影方式，默认为透视投影'perspective'，也支持设置为正交投影'orthographic'。
                autoRotate: false, // 是否开启视角绕物体的自动旋转查看。[ default: false ]
                autoRotateDirection: 'cw', // 物体自传的方向。默认是 'cw' 也就是从上往下看是顺时针方向，也可以取 'ccw'，既从上往下看为逆时针方向。
                autoRotateSpeed: 10, // 物体自传的速度。单位为角度 / 秒，默认为10 ，也就是36秒转一圈。
                autoRotateAfterStill: 3, // 在鼠标静止操作后恢复自动旋转的时间间隔。在开启 autoRotate 后有效。[ default: 3 ]
                damping: 0, // 鼠标进行旋转，缩放等操作时的迟滞因子，在大于等于 1 的时候鼠标在停止操作后，视角仍会因为一定的惯性继续运动（旋转和缩放）。[ default: 0.8 ]
                rotateSensitivity: 1, // 旋转操作的灵敏度，值越大越灵敏。支持使用数组分别设置横向和纵向的旋转灵敏度。默认为1, 设置为0后无法旋转。	rotateSensitivity: [1, 0]——只能横向旋转； rotateSensitivity: [0, 1]——只能纵向旋转。
                zoomSensitivity: 1, // 缩放操作的灵敏度，值越大越灵敏。默认为1,设置为0后无法缩放。
                panSensitivity: 1, // 平移操作的灵敏度，值越大越灵敏。默认为1,设置为0后无法平移。支持使用数组分别设置横向和纵向的平移灵敏度
                panMouseButton: 'left', // 平移操作使用的鼠标按键，支持：'left' 鼠标左键（默认）;'middle' 鼠标中键 ;'right' 鼠标右键(注意：如果设置为鼠标右键则会阻止默认的右键菜单。)
                rotateMouseButton: 'left', // 旋转操作使用的鼠标按键，支持：'left' 鼠标左键;'middle' 鼠标中键（默认）;'right' 鼠标右键(注意：如果设置为鼠标右键则会阻止默认的右键菜单。)
                distance: 100, // [ default: 100 ] 默认视角距离主体的距离，对于 grid3D 和 geo3D 等其它组件来说是距离中心原点的距离,对于 globe 来说是距离地球表面的距离。在 projection 为'perspective'的时候有效。
                minDistance: 40, // [ default: 40 ] 视角通过鼠标控制能拉近到主体的最小距离。在 projection 为'perspective'的时候有效。
                maxDistance: 400, // [ default: 400 ] 视角通过鼠标控制能拉远到主体的最大距离。在 projection 为'perspective'的时候有效。
                alpha: 40, // 视角绕 x 轴，即上下旋转的角度。配合 beta 可以控制视角的方向。[ default: 40 ]
                beta: 0, // 视角绕 y 轴，即左右旋转的角度。[ default: 0 ]
                minAlpha: -360, // 上下旋转的最小 alpha 值。即视角能旋转到达最上面的角度。[ default: 5 ]
                maxAlpha: 360, // 上下旋转的最大 alpha 值。即视角能旋转到达最下面的角度。[ default: 90 ]
                minBeta: -360, // 左右旋转的最小 beta 值。即视角能旋转到达最左的角度。[ default: -80 ]
                maxBeta: 360, // 左右旋转的最大 beta 值。即视角能旋转到达最右的角度。[ default: 80 ]
                center: [0, 0, 0], // 视角中心点，旋转也会围绕这个中心点旋转，默认为[0,0,0]。
                animation: true, // 是否开启动画。[ default: true ]
                animationDurationUpdate: 1000, // 过渡动画的时长。[ default: 1000 ]
                animationEasingUpdate: 'cubicInOut', // 过渡动画的缓动效果。[ default: cubicInOut ]
              },
              data: data,
            },
          ],
        };

        myChart.hideLoading();
        myChart.setOption(option, true);
      }
      // 设置地图点击事件
      // myChart.on('click', function (params) {
      //   console.log(params);
      //   if (params.data) {
      //     myChart.showLoading();
      //     setTimeout(() => {
      //       const { adcode, name, level } = params.data;
      //       if (level === 'district') {
      //         alert('无此区域地图显示！');
      //         initChinaMap(); // 初始化中国地图
      //         return;
      //       }
      //       getJSON({ name, adcode }, function (data) {
      //         renderChart(name, data);
      //       });
      //     }, 500);
      //   }
      // });

      // let myChart = null;
      const initChart = () => {
        echarts.registerMap('chinaBoundary', chinaBoundaryData);
        echarts.registerMap('chinaMap', chinaData);
        //指定points中的气泡样式
        // option.series[1].data = convertData(points, geoCoordinatesData);

        myChart && myChart.setOption(option, true);
      };

      onMounted(() => {
        myChart = echarts.init(document.getElementById('echartsMap3dContainerId'));
        //实现了3d中国地图，叠加3d的柱状图和3维气泡图
        initChart();
        // 初始化中国地图，实现了基本的3d中国地图，无3d柱状图或气泡图
        // initChinaMap();
        myChart.off('click');
        myChart.on('click', (e) => {
          console.log('map3d click', e);
        });
      });
      return {};
    },
  });
</script>
<style scoped lang="less">
  .map-wrap {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    .full-map {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 5;
      background-color: transparent;
    }
  }
</style>
